<template>
	<div style="display: flex;">
		<div style="width: 30%;">
			
		</div>
		<div style="width: 40%;">
			<h4>课程管理</h4>
		</div>
		<div style="width: 30%;">
			<button @click="go2Add()">添加课程</button>
		</div>
	</div>
	<hr>
	<div style="width: 85%;">
		<table style=" width: 100%;">
			<tr>
				<td>编号</td>
				<td>名称</td>
				<td>修改</td>
				<td>删除</td>
			</tr>
			<tr v-for="u in cous" style="line-height: 30px;">
				<td>{{u.cno}}</td>
				<td>{{u.cname}}</td>
				<td><button @click="go2Update(u.cno)">upd</button></td>
				<td><button @click="doDel(u.cno)">del</button></td>
			</tr>
		</table>
	</div>
		<!-- top=距离顶部  -->
		<dialog v-bind:open="bShow" 
		style="border: 2px solid aqua;
		 position: absolute;
		 background-color:  darkcyan;
		 top: 30%;opacity: 0.8;">
		 <div style="display: flex;justify-content: space-between;">
		 	<h4> {{actmsg[actidx]}}-表单输入</h4>
			<!-- 关闭按钮 -->
			<button style="height: 20px;" @click="cancel()">
				X </button>
		 </div>
			
			<hr >
			<table style="line-height: 30px;">
				<tr>
					<td>编号：</td>
					<td><input style="width: 80%;"
					type="text" v-model="cou.cno"
					v-bind:readonly="actidx != 0"></td>
				</tr>
				<tr>
					<td>名称：</td>
					<td><input style="width: 80%;"
					type="text" v-model="cou.cname"></td>
				</tr>
				<tr >
					<td></td>
					<td v-if="actidx==0">
						<button v-on:click="doAdd()">添加新的课程</button>
					</td>
					<td v-if="actidx==1">
						<button v-on:click="doUpdate()">修改</button>
					</td>
				</tr>
			</table>
		</dialog>
</template>

<script setup>
	import axios from 'axios';
</script>
<script>
	export default{
		data(){
			return{
				cous:[],
				//定义一个数组来显示不同的提示信息
				actmsg: ['添加','修改'],
				// actmsg[] 的下标， 当前的状态的下标 2, 默认显示状态
				actidx : 0,
				//定义一个对象和 表单做双向绑定 绑定
				cou : {cno:'',cname:''},
				bShow :false,
			}
		},
		methods:{
			cancel(){ this.bShow = false; },
			go2Add(){
				this.cou = {};
				this.bShow = true;
			},
			findAll(){
				console.log("Cou准备显示");

				this.$get("/api/adm/course/findAll",
				).then((resp)=>{
					console.log(resp.data.data);
					this.cous = resp.data.data;
				})
			},
			go2Update(cno){
				console.log("Cou去更新");
				this.actidx = 1;
				this.bShow = true;

				this.$get("/api/adm/course/findOne/"+cno
				).then((resp)=>{
					console.log(resp.data.data);
					this.cou = resp.data.data;
				})
			},
			doUpdate(){
				console.log("Cou更新");
				console.log(this.cou);
				
				this.bShow = false;

				this.$postj("/api/adm/course/update",this.cou
				).then((resp)=>{
					console.log(resp.data.data);
					this.cous = resp.data.data;
					this.$store.state.erropen = true;
					this.$store.state.errmsg = "修改成功";
				})
				//更新还原添加
				this.actidx = 0;
				this.cou = {};
			},
			doAdd(){
				console.log("Cou添加");
				console.log(this.cou)
				this.bShow = false;
				
				this.$postj("/api/adm/course/add",this.cou
				).then((resp)=>{
					console.log(resp.data.data);
					this.cous = resp.data.data;
					this.$store.state.erropen = true;
					this.$store.state.errmsg = "添加成功";
					this.cou = {};
				})
			},
			doDel(cno){
				console.log("Cou删除"); console.log("cno："+cno);
				
				this.$get("/api/adm/course/del?cno="+cno
				).then((resp)=>{
					console.log(resp.data.data);
					this.cous = resp.data.data;
					this.$store.state.erropen = true;
					this.$store.state.errmsg = "修改成功";
				})
			}
		},
		mounted() {
			console.log("初始化加载数据....");
			this.findAll();
		}
	}
</script>

<style>
</style>
